# 使用统一聊天窗口
from nicegui import ui

message_dict = {0: [""] * 10, 1: ["11"] * 10, 2: ["22"] * 11, 3: ["22"] * 11, 4: ["22"] * 11, "chi": []}
current_model = "聊天"
current_name = 1


def basic_left_layout():
    """
    设置参数以及功能导航栏
    :return:
    """
    with ui.column():
        basic_right_layout_children_checkbox("聊天","聊天")
        for i in range(5):
            basic_right_layout_children_checkbox("模型 {}".format(i), i)


def basic_right_layout():
    """
       各种功能布置在这里
       :return:
    """
    with ui.column():
        basic_right_layout_children_top("0")
        basic_right_layout_children_top("1")
        basic_right_layout_children_top("2")
        basic_right_layout_children_top("3")

        basic_right_layout_children_title()

        basic_right_layout_children()


def set_current_model(e):
    """
        刷新
        :return:
    """
    global current_model
    current_model = e.sender.text
    basic_right_layout_children_title.refresh()


def send_message(text):
    """
            刷新
            :return:
        """
    message_dict[current_name].append(text.value)
    chat_win_refresh.refresh()


@ui.refreshable
def chat_win_refresh():
    """
        刷新 聊天信息
        :return:
    """
    with ui.scroll_area().style("height: {}px; width: {}px;".format(500, 725)) as area:
        for history in message_dict[current_name]:
            ui.chat_message(history,
                            name='Robot',
                            stamp='now',
                            avatar='https://robohash.org/ui')

        area.scroll_to(percent=1)


@ui.refreshable
def basic_right_layout_children_title():
    """
    刷新 当前使用模型
    :return:
    """
    with ui.column():
        with ui.card().style("width:725px;"):
            with ui.row():
                ui.label("聊天")
                ui.link_target("聊天")
                ui.label("当前模型:{}".format(current_model))


def basic_right_layout_children_top(title):
    """
    其他框模版
    :param title:
    :return:
    """

    with ui.column():
        with ui.card().style("width:725px;"):
            with ui.row():
                ui.label(title)
                ui.link_target("{}".format(title))


def basic_right_layout_children_checkbox(model_name="模型1", link_index=""):
    """
    模型选择框
    :return:
    """

    # with ui.card().style("width:180px;"):
    with ui.row():
        ui.checkbox(model_name, on_change=lambda e: set_current_model(e)).style("margin-left: 2px;")
        ui.link('设置', "#{}".format(link_index)).style("margin-top: 8px;margin-right: 2px;")


def basic_right_layout_children():
    """
    右侧功能布局
    :return:
    """
    with ui.column():
        with ui.card().style("width:725px;"):
            chat_win_refresh()
        with ui.card().style("width:725px;"):
            with ui.row():
                text = ui.textarea(label='Text', placeholder='start typing').style("width:550px;")
                # button 可以是一个图片表示区别机器方可
                ui.button('Click me!', on_click=lambda: send_message(text))


def basic_main_layout():
    """
    主要布局
    :return:
    """
    with ui.column().style("margin:auto;"):
        with ui.card().style("height: {}px; width: {}px;".format(60, 1016)):
            ui.label("I'm a card")
        with ui.row():
            with ui.card().style("height: {}px; width: {}px;".format(850, 200)):
                with ui.scroll_area().style("height: {}px; width: {}px;".format(850, 200)):
                    basic_left_layout()
            with ui.card().style("height: {}px; width: {}px;".format(850, 800)):
                with ui.scroll_area().style("height: {}px; width: {}px;".format(850, 800)):
                    basic_right_layout()


basic_main_layout()
ui.run()
